<template>
 <div>
   <!-- hideOnSinglePage：是否隐藏页码 -->
   <ele-pro-table
     ref="table"
     size="mini"
     :columns="columns"
     :datasource="datasource"
     :selection.sync="selection"
     :need-page="true"
     :hideOnSinglePage="false"
   >
     <!--头部按钮-->
     <template v-slot:toolbar>
       <div class="btn-class">
         <el-button type="primary" @click="addUser">
           添加用户
         </el-button>
         <el-button type="danger" @click="delAccount">
           删除
         </el-button>
       </div>
     </template>
     <!-- 头像列 -->
     <template v-slot:head="{ row }">
       <div style="line-height: 1">
         <el-avatar v-if="row.head" :src="row.head" :size="35" />
       </div>
     </template>
     <!--操作-->
     <template v-slot:action="{ row }">
       <el-link
         type="danger"
         :underline="false"
         @click.stop="delUser(row)"
       >
         删除
       </el-link>
     </template>
   </ele-pro-table>
 </div>
</template>

<script>
  import {accountCode, accountCookie, accountH5,accountUser, accountQuery} from "@/api/matrixManage/accountList";
  import {accreditPage,saveFollowMe,accreditDel} from "@/api/explosiveCode/follow";
  export default {
    data() {
      return {
        username: this.$store.state.user.info.username,
        // 0：抖音 1：快手
        typeIndex:0,
        drawer: false,
        direction: 'rtl',
        // 当前编辑数据
        current: null,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'head',
            label: '头像',
            // width: 80,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'head'
          },
          {
            prop: 'nickname',
            label: '用户名称',
            // width: 300,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'openId',
            label: 'openId',
            // width: 300,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            // width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格数据
        users: [],
        // 选中数据
        selection: [],
        dataForm:{
          types:1,  // types：1用户库 2关注我
          merchantId: this.$store.state.user.info.merchantId
        },
      };
    },
    created(){
      this.query()
    },
    methods: {
      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        return accreditPage({ ...where, ...order, page, limit,...this.dataForm });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 查询矩阵账号【分页查询】
      query(){
        let param={
          /*nickname // 昵称
          groupId // 分组ID
          authStatus  // 授权状态  0失效1正常
          type // 账号类型 1D音2K手*/
          username: this.$store.state.user.info.username,
          page:1,
          limit:10
        }
        accountQuery(param)
          .then((data) => {
            this.users=data.list
            console.log(' this.users--', this.users)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 添加授权
      addUser(){
        console.log('this.codeShow111')
        this.show()
      },
      async show(){
        let code=''
        console.log("this.typeIndex",this.typeIndex)
        if(this.typeIndex==0 || this.typeIndex==1 || this.typeIndex==2){
          // 用户库
          // types：1用户库 2关注我
          code = await accountUser(this.$store.state.user.info.merchantId,1)
          // 获取D音静态二维码
          // code =await api(this.$store.state.user.info.username)
          console.log("code===============",code,code.data)
          window.open(code.data)
        }
      },/* 单个删除 */
      delUser(row) {
        console.log("单个删除",row)
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delAccounts(ids)
      },
      // 删除
      delAccount(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择需要操作的数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delAccounts(ids)
      },
      delAccounts(ids){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("322222222222",ids)
          accreditDel({
            ids:ids,
            types:1  // types：1用户库 2关注我
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
    }
  };
</script>
<style scoped lang="less">
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      height: 33px;
    }
  }
  .top-padding{
    padding: 32px 32px 55px;
    .avatar{
      background-color: #000000;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 19px;
    }
    .end-time{
      margin-top: 15px;
      color: #757575;
      .empower{
        margin:0 16px 0 4px;
        color: #31A952;
      }
    }
    .numberCount{
      width: calc(100% / 3);
      span{
        color: #757575;
      }
      div{
        margin-top: 11px ;
        color: #1E6CEB;
        font-size: 32px;
      }
    }
  }
  /*数据刷新 按钮*/
  .btn-refresh{
    background: #1E6CEB;
    border-radius: 2px;
    margin: 0 31px 17px;
  }
  .m-table{
    margin: 0 28px 0 24px;
    .stauts-class,.sel-stauts-class{
      font-size: 16px;
      margin:0 52px 0 26px;
      padding: 23px 0px 15px;
      line-height: 19px;
    }
    .stauts-class{
      color: #757575;
    }
    .sel-stauts-class{
      color: #1E6CEB;
      border-bottom:3px solid #1E6CEB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
  }
</style>
